import router from 'umi/router'
import {Layout, Menu, Icon} from 'antd'
import siderConfig from './siderConfig.js'

const {Sider} = Layout;
const {SubMenu} = Menu;

const AppSider = function(){
    const itemClickAction = (path)=>{
      router.push(path);
    }

    return(
        <Sider width={200} style={{ background: '#fff' }}>
          <Menu
            mode="inline"
            defaultSelectedKeys={ [siderConfig[0].id]}
            style={{ height: '100%', borderRight: 0 }}
          >
            {
              siderConfig.map(configs=>(
                <SubMenu
                  key={configs.id}
                  title={
                    <span>
                      <Icon type={configs.icon} />
                      {configs.root}
                    </span>
                  }
                >

                  {
                    configs.children.map(item=>(
                      <Menu.Item key={item.id} onClick={()=>{
                        itemClickAction(item.path)
                      }} >
                        {item.title}
                      </Menu.Item>
                    ))
                  }

                </SubMenu>
              ))
            }
        
          </Menu>
        </Sider>
    )
}


export default AppSider